<!--
 * @Author: your name
 * @Date: 2021-03-29 21:35:31
 * @LastEditTime: 2021-06-01 20:41:12
 * @LastEditors: Please set LastEditors
 * @Description: 搜索结果分类列表
 * @FilePath: /medicine-web/src/components/TabResultList/index.vue
-->
<template>
  <div class="tab-result-container">
    <!-- <a-menu v-model="currentTab" mode="horizontal" class="tab-result__outter" v-if="showTab">
      <a-menu-item v-for="item in tabList" :key="item.label">{{item.label}}</a-menu-item>
    </a-menu> -->
    <ul class="tab-selection">
      <div class="tab-selection__selectors">
        <li v-if="showSelectAll">
          <a-checkbox @change="selectAll">
            <span class="font-pattern-3">全选</span>
          </a-checkbox>
        </li>
        <li v-if="showCollectionAll" style="cursor: pointer;" @click.stop="collectionAll">
          <img :src="require('@/assets/image/collection.png')" alt="" style="width: 16px; height: 16px">
          <span class="font-pattern-3" style="margin-left:6px; line-height: 14px">批量收藏</span>
        </li>
        <li v-if="showDownloadAll" style="cursor: pointer;" @click.stop="downloadAll">
          <img :src="require('@/assets/image/download.png')" alt="" style="width: 20px; height: 20px">
          <span class="font-pattern-3" style="margin-left:6px; line-height: 14px">批量下载</span>
        </li>
        <ul class="tab-selection__inner" style="border-bottom: none;" v-if="sortTabList && sortTabList.length > 0">
          <li class="tab-filter__item" v-for="item in sortTabList" :key="item">
            <tabSort :sortLabel="item" @sortStatus="sortStatus"></tabSort>
          </li>
        </ul>
      </div>
      <div>
        <span class="tab-selection__count">
          共计：{{resultCount}}条
        </span>
      </div>
      
    </ul>
    <slot name="resultList"></slot>
  </div>
</template>
<script>
import tabSort from '@/components/TabSort/index'
export default {
  name: 'tabResultList',
  components: { tabSort },
  data () {
    return {
      currentTab: ['文献集锦'],
    }
  },
  methods: {
    sortStatus (sort) {
      this.$emit('sortStatus', sort)
    },
    selectAll (e) {
      this.$emit('checkAll', e.target.checked)
    },
    collectionAll () {
      this.$emit('collectionAll', true)
    },
    downloadAll () {
      this.$emit('downloadAll', true)
    }
  },
  props: {
    sortTabList: { // 为空数组时，则tab-selection__inner元素不展示
      type: Array,
      default: () => ['时间', '相关性', '影响因子']
    },
    showSelectAll: { // 显示全选
      type: Boolean,
      default: true
    },
    showCollectionAll: { // 显示批量收藏
      type: Boolean,
      default: true
    },
    showDownloadAll: { // 显示批量下载
      type: Boolean,
      default: true
    },
    resultCount: {
      type: Number,
      default: 0
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/flex.scss';
@import '~@/assets/styles/common.scss';
.tab-result-container {
  width: 100%;
  .tab-selection {
    padding: 13px 0px;
    border-bottom: 1px solid #ccc;
    color: #555555;
    @include flex-def;
    @include flex-cCenter;
    @include flex-zBetween;
    li {
      @include flex-def;
      @include flex-cCenter;
    }
    li:nth-child(n+1) {
      margin-right: 31px;
    }
    .tab-filter__item {
      font-size: 14px;
    }
    .tab-selection__selectors {
      @include flex-def;
      @include flex-cCenter;
    }
    .tab-selection__count {
      color: #AEAEAE;
      font-size: 14px;
    }
  }
  .tab-selection__inner {
    color: #555555;
    @include flex-def;
    @include flex-cCenter;
  }
}
</style>
